<template>
	<div>
		<ul>
			<li v-for="info in infos" v-link="{'name': info.hash}">
				<span>{{info.text}}</span>
				<span class="value">{{info.value}}</span>
			</li>
		</ul>
	</div>
</template>
<script>
	export default {
		data: function () {
			return {
				info: [
					{
						value: this.name,
						text: '昵称',
						hash: 'editname'
					},
					{
						value: this.introduction,
						text: '个性简介',
						hash: 'editintroduction'
					}
				]
			}
		},
		vuex: {
			getters: {
				name: function (state) {
					return state.user.name
				},
				introduction: function (state) {
					return state.user.introduction
				}
			}
		},
		computed: {
			infos: function () {
				return [
					{
						value: this.name,
						text: '昵称',
						hash: 'editname'
					},
					{
						value: this.introduction,
						text: '个性简介',
						hash: 'editintroduction'
					}
				]
			}
		}
	}
</script>
<style scoped>
	ul {
		list-style: none;
		padding:0 25px;
	}
	li {
		background-color: #FFF;
		padding: 20px 0 20px 20px;
		border-bottom:1px solid #ccc;
		display: flex;
	}
	li>span:nth-child(1) {
		flex: 1;
	},
	.value {
		padding-left:10px;
	}
</style>